import * as React from "react";
import { connect } from "react-redux";
import { List } from "immutable";
import { MapAction } from "../../actions";
import Styled from "./styles.scss";
import Block from "../Block";
interface IMapProps {
    [x: string]: any;
    status: string;
    coordinate: Game.ICoordinate;
    data: List<List<number>>;
    onReady: any;
}

interface IMapStates {
    [x: string]: any;
}

class Map extends React.Component<IMapProps, IMapStates> {

    constructor(props: IMapProps) {
        super(props);
    }

    public componentDidMount() {
        this.props.onReady();
    }
    public render() {
        return (
            <div className={Styled.container}>
                {this.props.data.map((mValue: List<number>, mKey: number) =>
                    <div key={mKey}>
                        {mValue.map((nValue: number, nKey: number) =>
                            <Block key={nKey} status={nValue} />
                        )}
                    </div>
                )}
            </div>
        );
    }
}
const MapConn = connect(
    (state: any) => {
        const map = state.get("map").toObject();
        return {
            status: map.status,
            data: map.data,
            coordinate: map.coordinate
        };
    },
    (dispatch: (action: any) => any) => {
        return {
            onReady: () => dispatch(MapAction.mapReady())
        };
    }
)(Map);
export default MapConn;
